<template>
  <div id="map">
    <div class="input-card">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, shallowRef } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
//@ts-ignore
window._AMapSecurityConfig = {
  securityJsCode: "e1833ddaed11f727cbe2bfdefd55f90a",
};
const map = shallowRef();
var marker: any, lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];
const initMap = () => {
  AMapLoader.load({
    key: "05d3881114c66f3d9ddaa7b0212ca635", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  })
    .then((AMap) => {
      map.value = new AMap.Map("map", {
        viewMode: '3D', //默认使用 2D 模式
        zoom: 10, //地图级别
        center: [116.396923, 39.918203], //地图中心点
        mapStyle: "amap://styles/normal", //设置地图的显示样式
      });
      var scale = new AMap.Scale();
      map.value.addControl(scale);
      // JSAPI2.0 使用覆盖物动画必须先加载动画插件
      AMap.plugin('AMap.MoveAnimation', () => {
        marker = new AMap.Marker({
          map: map.value,
          position: [116.478935, 39.997761],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
          offset: new AMap.Pixel(-13, -26),
        });

        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: map.value,
          path: lineArr,
          showDir: true,
          strokeColor: "#28F",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
          map: map.value,
          strokeColor: "#AF5",  //线颜色
          strokeWeight: 6,      //线宽
        });


        marker.on('moving', function (e: any) {
          passedPolyline.setPath(e.passedPath);
          map.value.setCenter(e.target.getPosition(), true)
        });

        map.value.setFitView();


      });
    })
    .catch((e) => {
      console.log(e);
    });
};
const startAnimation = () => {
  marker.moveAlong(lineArr, {
    // 每一段的时长
    duration: 500,//可根据实际采集时间间隔设置
    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    autoRotation: true,
  });
};

const pauseAnimation = () => {
  marker.pauseMove();
};

const resumeAnimation = () => {
  marker.resumeMove();
};

const stopAnimation = () => {
  marker.stopMove();
};
onMounted(() => {
  initMap();
});
</script>

<style scoped lang="scss">
@import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css');
#map {
  width: 100%;
  height: 700px;
}
.input-card{
  z-index: 999;
}
</style>